<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局-浮动布局</title>
</head>
<style>
    /* 清楚默认布局  *清楚所有 */
    *{  
        margin: 0;
        padding: 0;
    }
    div{
        /* 盒子模型改为边框盒子 */
        box-sizing: border-box;
        font-size: 26px;
        color: red;
        /* 加粗 */
        font-weight: 700;
        text-align: center;
        /* 斜体 */
        font-style: italic;
    }
    .main{
        /* border: 1px solid green; */
        /* 设置页面宽高为视口宽高 */
        /* vw，vh是相对单位 相对于浏览器的视口宽高 */
        width: 100vw;
        height: 100vh;
    }
    .header{
        border: 1px solid red;
        background-color: #F6ACA3;
        /* 它的父元素main的100% */
        width: 100%;
        height: 10%;
    }
    .content{
        /* border: 1px solid red; */
        width: 100%;
        height: 80%;
    }
    .contentleft,.contentright{
        border: 1px solid blue;
        /* display: inline-block; */
        height: 100%;
    }
    .contentleft{
        background-color: rgba(139, 243, 208, 0.834);
        width: 30%;
        /* 浮动布局-左浮动 */
        float: left;
    }
    .contentright{
        background-color: bisque;
        width: 70%;
        /* 浮动布局-右浮动 */
        float: right;
    }
    .up,.down{
        border: 1px solid rgb(72, 72, 132);
        height: 50%;
    }
    .up{
        background-color: rgba(178, 105, 246, 0.64);
    }
    .down{
        background-color: azure;
    }
    .footer{
        border: 1px solid red;
        background-color: #a2ef7b;
        width: 100%;
        height: 10%;
    }
</style>
<body>
    <div class="main">
        <div class="header">
            <!-- header -->
        </div>
        <div class="content">
            <div class="contentleft">
                <!-- contentleft -->
            </div>
            <div class="contentright">
                <!-- contentright -->
                <div class="up">
                    <!-- up -->
                </div>
                <div class="down">
                    <!-- down -->
                </div>
            </div>
        </div>
        <div class="footer">
            <!-- footer -->
        </div>
    </div>
</body>
</html>